<template>
  <view class="w100p pr common_wrap">
    <CommonHeader v-if="statusFlag == 1" :title="$t('未付款/待确认')" color="#000" backgroundColor="rgba(236,246,254,1)" :is-right="false"></CommonHeader>
    <CommonHeader v-else-if="statusFlag == 2 || statusFlag == 3" :title="$t('已付款')" color="#000" backgroundColor="rgba(236,246,254,1)" :is-right="false"></CommonHeader>
    <CommonHeader v-else-if="statusFlag == 4" :title="$t('已结算')" color="#000" backgroundColor="rgba(236,246,254,1)" :is-right="false"></CommonHeader>
    <CommonHeader v-else-if="statusFlag == 5" :title="$t('售后')" color="#000" backgroundColor="rgba(236,246,254,1)" :is-right="false"></CommonHeader>
	<view v-if="statusFlag == 1 && detailInfo.day != 0" class="timeOut">
		{{ $t('还剩') }}<uni-countdown :show-day="true" :hour="miniteObj.hour" :minute="miniteObj.minute" :second="miniteObj.second" color="#FF6A00" @timeup="onTimeup"></uni-countdown>{{$t('订单')}}{{ $t('自动取消') }}
	</view>
    <view class="w100p flex-item oh">
      <scroll-view scroll-y class="w100p scroll-Y">
        <!-- 采购 -->
        <view class="wrapper-info pr">
          <!-- 基础信息 -->
          <view class="base-info" @click="goPerson">
            <view class="left-avatar">
			  <view class="avatar">
			    <image :src="getImageUrl(detailInfo.avatar)" mode="aspectFill" class="w-100 h-100" style="border-radius: 500rpx;"></image>
			  </view>
            </view>
            <!-- 单数 -->
			<view style="flex: 1;">
              <view class="flex mt-10">
				<flag class="w-30 h-20 mr-4 ml-15" :country="detailInfo.country" />
                <view class="name ellipsis_one">{{detailInfo[plang('username')]}}</view>
              </view>
				<view  :class="langR == 'zh'?'between h-60':'between h-60 r_between'">
					<p class="user-sty">
						{{
						[$t('供应商'),$t('经销商'),$t('货代公司'),$t('采购商'),$t('服务公司'),$t('报关公司'),$t('运输公司'),$t('国际物流公司'),$t('司机'),$t('服务商'),$t('俄罗斯个人'),$t('翻译员')][detailInfo.identity_type]
                 		 }}
						<!-- {{detailInfo.identity_type == 0 ? $t('供应商') : $t('采购商')}} -->
					</p>
					<!-- {{$t('采购商')}} -->
					
				  <!-- <p class="user-sty" v-if="langR == 'zh'"></p> -->
					<view class="right-numwrap">
						<view class="getInfo" @click.stop="inlineCall(detailInfo)">{{$t('联系TA')}}</view>
						<view class="getInfo" @click.stop="callPhone(detailInfo)">{{$t('打电话')}}
							<image
								src="/static/translatexx.png"
								class="translatexxxxxx"
								mode="widthFix"
							/>
						</view>
					</view>
				</view>
			</view>
          </view>
		  <view class="centerContBox">
		  	<view class="centerCont">
				<view class="flex">
					<view class="leftCont">
						<image class="pic" :src="getImageUrl(detailInfo.product_img_urls.split(',')[0])" mode="aspectFill" />
					</view>
					<view class="cenCont ml-10">
						<view class="cenContTop">
							{{detailInfo[plang('product_name')]}}
						</view>
						<view class="cenContB">
							{{detailInfo[plang('category_name')]}}
						</view>
					</view>
				</view>
		  		<view class="rightCont">
		  			<view class="cenContTop font-bold">
		  				{{detailInfo.currency}} {{detailInfo.price}}
		  			</view>
		  			<view class="cenContB" style="text-align: right;">
		  				{{$t('共')}}{{detailInfo.amount}}{{$t('件')}}
		  			</view>
		  		</view>
		  	</view>
		  </view>
		  
		  <view v-if="statusFlag == 1 && ((detailInfo.mailing_type == '2' && detailInfo.shipping_fee != '0.00') || detailInfo.mailing_type == '1')" class="caigou-info">
		  	<view class="" >
		  	  <view class="fz26 text-010 font-bold">{{$t('上传付款凭证')}}</view>
		  	  <view class="upload-li">
		  	    <!-- <view class="">上传{{$t('商品')}}图片<text class="require">*</text><text class="yaoqiu">{{$t('支持')}}jpeg、jpg、png (大小5m内)</text></view> -->
		  	    <view class="uploads">
		  	      <view class="img" v-for="(item,index) in productImgUrls" :key="index" @click="onPreview(item.fullurl)">
		  	        <image
		  	          :src="item.fullurl"
		  	          mode="aspectFill"
		  	        />
						<!-- <view class="delete" @click.stop="onDelete(index, 'productImgUrls')">
							<view class="lien"></view>
						</view> -->
		  	      </view>
		  	      <view class="img mt-15" @click="onUpload({ type: 'image', size: 7, count: 1 })" v-if="productImgUrls.length<12">
		  	        <image
		  	          src="/static/caigou/upload.png"
		  	        />
		  	      </view>
		  	    </view>
		  	  	<p v-if="productImgUrls.length == 0 & submitBtn" class="fz22 mt-5 mb-10" style="color: #FF0000;">{{$t('请上传付款凭证')}}</p>
		  	  </view>
		  	</view>
			<button class="uploadBtn" @click="uploadPay" style="margin-top: 18rpx;">
				<p>{{$t('上传凭证')}}</p>
			</button>
		  	<!-- <view class="list">
		  	  <view class="txt">{{$t('商品')}}价格</view>
		  	  <view class="txt font-bold">￥1444</view>
		  	</view>
		  	<view class="list">
		  	  <view class="txt">运费</view>
		  	  <view class="fz24 font-bold" style="color: #ff0000;">待商家回复</view>
		  	</view>
		  	<view class="list">
		  	  <view class="txt">优惠</view>
		  	  <view class="txt font-bold">￥1444</view>
		  	</view>
		  	<view class="allPrice">
		  		共减<span style="margin-right: 20rpx;">￥40</span>总合计<span>￥7000</span>
		  	</view> -->
		  </view>
			<view class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('订单信息')}}</view>
				  <view class="txt" @click="orderInfoOn=!orderInfoOn">{{orderInfoOn? $t('收起'):$t('展开')}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('币种')}}</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">{{detailInfo.currency}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('订单编号')}}</view>
				  <view class="txt" style="text-align: right;">{{detailInfo.order_number}}<span style="margin: 0 10rpx;">|</span><span @click="copyToClipboard(detailInfo.order_number)">{{$t('复制')}}</span></view>
				</view>
				<view class="" v-if="orderInfoOn">
					<view class="list">
					  <view class="txt">{{$t('下单时间')}}</view>
					  <view class="txt">{{detailInfo.create_time}}</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('发货地址')}}</view>
					  <view class="text-010 fz24" style="max-width: 500rpx;text-align: right;">{{ detailInfo[plang('address')] }}</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('收货地址')}}</view>
					  <view class="text-010 fz24" style="max-width: 500rpx;text-align: right;">{{ detailInfo[plang('destination')] }}</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('运输方式')}}</view>
					  <view class="txt">{{ detailInfo.mailing_type == 1 ? $t('自提') : $t('卖家发货') }}</view>
					</view>	
					<view class="">
					  <view class="fz24 text-888">{{$t('收款账号图片')}}</view>
					  <view class="mt-10">
							<image
								:src="getImageUrl(urlImg)"
								mode="widthFix"
								@click="onPreview(urlImg)"
							></image>
					  </view>
					</view>
					<view v-if="statusFlag == 4" class="list">
					  <view class="txt">{{$t('支付状态')}}</view>
					  <view class="txt" style="color: #03C24F;">{{$t('成功')}}</view>
					</view>
					<view v-if="(statusFlag == 4 || statusFlag == 3 || statusFlag == 2 || statusFlag == 1) && detailInfo.payment_voucher" class="list">
					  <view class="txt">{{$t('支付凭证')}}</view>
					  <view class="flex img-overx">
						  <image v-for="item in detailInfo.payment_voucher.split(',')" :src="getImageUrl(item)" mode="aspectFill" class="w-150 h-150 ml-10" @click="onPreview(item)" ></image>
					  </view>
					</view>
				</view>
			</view>
			<view class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('订单总价')}}</view>
				  <view class="status font-bold">{{detailInfo.currency}}{{detailInfo.total_price}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('商品价格')}}</view>
				  <view class="txt font-bold">{{detailInfo.currency}} {{detailInfo.price}}</view>
				</view>
				<view v-if="detailInfo.mailing_type == '2'" class="list">
				  <view class="txt">{{$t('运费')}}</view>
				  <!-- <view class="txt font-bold">￥1444</view> -->
				  <view v-if="detailInfo.shipping_fee == '0.00'" class="fz24 font-bold" style="color: #ff0000;">{{$t('待商家回复')}}</view>
				  <view v-else class="fz24 font-bold text-888">{{detailInfo.currency}} {{detailInfo.shipping_fee}}</view>
				</view>
				<!-- <view class="list">
				  <view class="txt">{{$t('优惠')}}</view>
				  <view class="txt font-bold"></view>
				</view>
				<view class="allPrice">
					{{$t('共减')}}<span style="margin-right: 20rpx;">{{detailInfo.currency}} {{detailInfo.total_price}}</span>{{$t('总合计')}}<span>{{detailInfo.currency}} {{detailInfo.total_price}}</span>
				</view> -->
			</view>
		
			<view v-if="statusFlag == 4 && detailInfo.settlement_info" class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('GLUZ结算帐单')}}</view>
				  <view class="txt" @click="orderPayOn=!orderPayOn">{{orderPayOn? $t('收起'):$t('展开')}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('付款金额')}}</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">{{detailInfo.currency}} {{get(detailInfo, 'settlement_info.pay_price')}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('币种')}}</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">{{detailInfo.currency}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('技术服务费')}}</view>
				  <view class="fz24 font-bold text-010">{{detailInfo.currency}} {{get(detailInfo, 'settlement_info.service_fee')}}</view>
				</view>
				<view class="" v-if="orderPayOn">
					<view class="list">
					  <view class="txt">{{$t('结算时间')}}</view>
					  <view class="txt">{{get(detailInfo, 'settlement_info.settlement_time')}}</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('支付银行账号')}}</view>
					  <view class="txt">{{get(detailInfo, 'settlement_info.bank_account')}}</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('开户行')}}</view>
					  <view class="txt" style="max-width: 500rpx;text-align: right;">{{get(detailInfo, `settlement_info.${plang('opening_bank')}`)}}</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('支付状态')}}</view>
					  <view class="fz24" style="color: #03C24F;">{{get(detailInfo, 'settlement_info.pay_status') == 1 ? $t('成功') : $t('失败')}}</view>
					</view>
					<!-- <view class="list">
					  <view class="txt">{{$t('支付凭证')}}</view>
					  <view class="imgs">
						  <image src="/static/caigou/pic.png" mode="aspectFill" class="w-150 h-150" ></image>
					  </view>
					</view> -->
				</view>
			</view>
		
			<!-- <view v-if="statusFlag == 4 && detailInfo.after_sales" class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('处理结果')}}</view>
				  <view class="txt" @click="orderSaleOn=!orderSaleOn">{{orderSaleOn? $t('收起'):$t('展开')}}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('是')}}{{$t('否')}}赔付</view>
				  <view class="fz24" style="color: #03C24F;">已赔付</view>
				</view>
				<view class="list">
				  <view class="txt">付款金额</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">￥7000.15</view>
				</view>
				<view class="list">
				  <view class="txt">币种</view>
				  <view class="fz24 font-bold" style="color: #FF6A00;">CNY</view>
				</view>
				<view class="" v-if="orderSaleOn">
					<view class="list">
					  <view class="txt">结算时间</view>
					  <view class="txt">2024-12-19 15:07:30</view>
					</view>
					<view class="list">
					  <view class="txt">支付银行账号</view>
					  <view class="txt">679990122000230744</view>
					</view>
					<view class="list">
					  <view class="txt">{{$t('开户行')}}</view>
					  <view class="txt" style="max-width: 500rpx;text-align: right;">黑河农村商业银行股份有限公司</view>
					</view>
					<view class="list">
					  <view class="txt">支付状态</view>
					  <view class="fz24" style="color: #03C24F;">成功</view>
					</view>
					<view class="list">
					  <view class="txt">支付凭证</view>
					  <view class="imgs">
						  <image src="/static/caigou/pic.png" mode="aspectFill" class="w-150 h-150" ></image>
					  </view>
					</view>
				</view>
			</view> -->
		
			<view v-if="detailInfo.after_sales" class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('售后详情')}}</view>
				  <view class="txt" @click="AfterSalesOpen=!AfterSalesOpen">{{AfterSalesOpen? $t('收起'):$t('展开')}}</view>
				</view>
				<view v-if="get(detailInfo, 'after_sales.buyer_agree_status') == 0" class="list">
				  <view class="txt">{{$t('申请原因')}}</view>
				  <view class="txt" style="max-width: 500rpx;text-align: right;">{{ get(detailInfo, `after_sales.${plang('reason')}`) }}</view>
				</view>
				<view class="list">
				  <view class="txt">{{$t('赔付比例')}}</view>
				  <view class="txt">{{ get(detailInfo, 'after_sales.buyer_agree_status') == 1 ? get(detailInfo, 'after_sales.platform_compensation_ratio') : get(detailInfo, 'after_sales.compensation_ratio') }}%</view>
				</view>
				<view class="" v-if="get(detailInfo, 'after_sales.buyer_agree_status') == 0 && AfterSalesOpen">
					<view class="list" style="align-items: flex-start;">
					  <view class="txt">{{$t('上传图片')}}</view>
					  <view >
						  <image v-for="item in get(detailInfo, 'after_sales.image_url').split(',')" :src="getImageUrl(item)" mode="aspectFill" class="w-150 h-150" ></image>
					  </view>
					</view>
					<view v-if="get(detailInfo, 'after_sales.video_url')" class="list" style="align-items: flex-start;">
					  <view class="txt">{{$t('上传视频')}}</view>
					  <view>
						  <image v-for="item in get(detailInfo, 'after_sales.video_url').split(',')" :src="getImageUrl(item)" mode="aspectFill" class="w-150 h-150" ></image>
					  </view>
					</view>
				
				</view>
				<!-- <view class="" v-if="AfterSalesOpen">
					<view class="list" style="align-items: flex-start;">
					  <view class="txt">需求{{$t('商品')}}</view>
					  <view >
						  <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3"></sunui-upimg>
					  </view>
					</view>
					<view class="list" style="align-items: flex-start;">
					  <view class="txt">{{$t('上传图片')}}</view>
					  <view >
						  <sunui-upimg :url="upPicUrl" ref="upload1" title="店铺logo" @upload="handleLoaded1" @change="handleChange1" :number="3" type="video"></sunui-upimg>
					  </view>
					</view>

				</view> -->
			</view>
			<view v-if="statusFlag == 4 && detailInfo.pu_comment" class="caigou-info">
				<view class="title">
				  <view class="name">{{$t('评价')}}</view>
				  <view class="txt"></view>
				</view>
				<view class="evaluateBox">
					<view class="evaluateImg">
						<image :src="getImageUrl(get(detailInfo, 'pu_comment.user_info.avatar'))" mode=""></image>
					</view>
					<view class="evaluate">
						<view class="evaluateName">
							{{  get(detailInfo, `pu_comment.user_info.${plang('username')}`) }}
						</view>
						<view class="evaluateRate">
							<view class="flex-start mt-15">
								<view class="" v-for="(it, ind) in scoreList">
									<image v-if="it.num <= get(detailInfo, 'pu_comment.star')" class="ml-8 w-25 h-25"
										src="/static/img/starBright.png"></image>
									<image v-else class="ml-8 w-25 h-25" src="/static/img/starDark.png"></image>
								</view>
							</view>
						</view>
						<view class="evaluateCont">
							{{  get(detailInfo, `pu_comment.${plang('content')}`) }}
						</view>
						<view class="evaluateDate">
							<view class="">
								{{  get(detailInfo, 'pu_comment.create_time') }}
							</view>
						</view>
					</view>
				</view>
			</view>
          <!-- 采购信息 -->
         <!-- <view class="caigou-info">
            <view class="title">
              <view class="name">{{$t('采购信息')}}</view>
              <view class="status">{{$t('进行中')}}</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('需求商品')}}</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">期望品牌</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">期望单价</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">目的地</view>
              <view class="txt">俄罗斯</view>
            </view>
            <view class="list">
              <view class="txt">需求数量</view>
              <view class="txt">1{{$t('台')}}</view>
            </view>
            <view class="list">
              <view class="txt">期望生产日期</view>
              <view class="txt">2025-1-10 至 2025-1-15</view>
            </view>
          </view> -->
          <!-- 参与信心 -->
       <!--   <view class="caigou-info">
            <view class="title">
              <view class="name">参与信息</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}名称</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}品牌</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}报价（单价）</view>
              <view class="txt">起重机</view>
            </view>
            <view class="list">
              <view class="txt">{{$t('商品')}}报价（单价）</view>
              <view class="txt">俄罗斯</view>
            </view>
            <view class="list">
              <view class="txt">发货时间</view>
              <view class="txt">1{{$t('台')}}</view>
            </view>
            <view class="list">
              <view class="txt">发货地址</view>
              <view class="txt">俄罗斯</view>
            </view> -->
            <!-- 图片列表  -->
            <!-- <view class="w100p ">
              <view class="w100p shop_introduce">
                <view class="title">{{$t('商品')}}简介</view>
                <view class="jianjie">
                  <u-parse :html="$t('这个是商品介绍介绍这个是商品介绍介绍这个是商品介绍介绍')"></u-parse>
                </view>
              </view>
          

            </view> -->
            <!-- 商品其他文件 -->
            <!-- <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品')}}图片
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in [...list, ...list]" :key="index"></image>
                </view>
              </scroll-view>
            </view>
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品')}}视频
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in [...list, ...list]" :key="index"></image>
                </view>
              </scroll-view>
            </view>
            <view class="file-wrap">
              <view class="w100p big_title">
                {{$t('商品')}}相关文件
              </view>
              <scroll-view scroll-x class="scrolxxx-wwww">
                <view class="w100p scrolxxx">
                  <image class="goback_img" :src="item" mode="aspectFill" @click="amplifyImg(item)"
                    v-for="(item, index) in [...list, ...list]" :key="index"></image>
                </view>
              </scroll-view>
            </view>
          </view> -->

		  <!-- </view> -->
          <view style="height: 16rpx;"></view>





        </view>
      </scroll-view>
    </view>


    <!-- 底部导航栏 -->
   <view class="footer-nav">
      <view class="footer-wrapper">
        <!-- <view class="btn blue">
          拨打{{$t('视频通话')}}
        </view> -->
		<!-- 如果买家选择自提货物会有发布货源按钮，跳转发布运输；如果买家合作的时候选择卖家发货，那就没有按钮只展示详情 -->
        <!-- <view v-if="statusFlag == 1 && detailInfo.mailing_type == 1" class="btn blueBuy" @click="onSendShiping">{{$t('发布')}}货源</view> -->
		<!-- 如果用户未发布，点击立即发货，如果点击过后展示 -- 申请售后和同意付款 -->
        <view v-if="statusFlag == 2 && detailInfo.mailing_type == 1" class="btn blueBuy" @click="onSendShiping">{{$t('立即发货')}}</view>
		<button v-if="statusFlag == 3" :disabled="btnDis" class="btn bluePart" @click="afterSale">{{$t('申请售后')}}</button>
		<button v-if="statusFlag == 3" :disabled="btnDis" class="btn green" @click="confirmModal = true">{{$t('同意付款')}}</button>
      </view> 
    </view> 


    <!-- 播放视频 -->
    <uni-popup ref="popupVideo" type="center" background-color="#000" mask-background-color="#000" class="popvexxx">
      <view class="wrapper-video">
        <video id="mainVideo" :src="playVideo" :show-center-play-btn="true" object-fit="cover"
          play-btn-position="center" :controls="true" :autoplay="true" class="video-main" :show-fullscreen-btn="false">
        </video>
      </view>
    </uni-popup>

    <!-- 图片放大 -->
    <uni-popup ref="popup" class="common_pop" mask-background-color="rgba(0,0,0,1)">
      <view class="w100p">
        <image class="w100p" :src="commonImg" mode="widthFix" @click="closePop"></image>
      </view>
    </uni-popup>
	
	<u-modal :confirm-text="$t('确定')" :show-title="false" :cancel-text ="$t('取消')"  class="modalSty" v-model="confirmModal" :content="$t('是否确认付款?')" :showCancelButton="true" @cancel="confirmModal = false" @confirm="confirmPay"></u-modal>
	
	<u-modal :confirm-text="$t('确定')" :show-title="false"  :cancel-text ="$t('取消')"  class="modalSty" v-model="confirmSocure" :content="$t('货源已发布成功')+'!'"></u-modal>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'; 
import {
  IMAGE_URL,
} from "@/config/app"
import { scorePayment } from "@/api/basic";
import { chechkIm } from "@/api/basic";
import CommonHeader from "@/pages/components/common-header.vue";
import sunuiUpimg from "@/components/tm-upload/tm-upload.vue";
  import { uploadFile, chooseFile } from '@/assets/public.js';
import { purchaseDetaile, upPaymentVoucher, confirmPay, yuntraceUpdate } from '@/api/caigoOrder.js'
import { request_minute } from '@/api/basic.js'
export default {
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight"),
      videos: null, // 播放ref
	  submitBtn: false,
	  productImgUrls: [],
      playVideo: '',
      commonImg: '',
      currntMainPic: '',
	  confirmModal: false,
	  confirmSocure: false,
      currentVideo: '',
      isShow: true,
	  scoreList: [{
	  	num: 1
	  },
	  {
	  	num: 2
	  },
	  {
	  	num: 3
	  },
	  {
	  	num: 4
	  },
	  {
	  	num: 5
	  },
	  ],
      historyList: [], //浏览记录列表
      list: [],
      product: {},
	  orderInfoOn:true,
	  orderPayOn: false,
	  orderSaleOn: false,
	  AfterSalesOpen:false,
	  detailInfo: {},
	  uniRate:2,
	  statusFlag: 1,
	  yuntrace_id: '',
	  btnDis: false,
	  imgUrls: '',
	  // IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
	  upPicUrl: 'https://cx.csredian.com/app/index.php?i=7&c=entry&a=wxapp&v=2.2.4&do=upload_img&m=wjyk_sqpt',
		urlImg: '',
		miniteObj: {
			hour: 0,
			minute: 0,
			second: 0
		}

    }
  },
  components: {
    CommonHeader,
	sunuiUpimg
  },
  methods: {
		goPerson() {
      if (this.detailInfo.identity_type == 0) {
        uni.navigateTo({
          url: `/pages/details/merchantDetail?bid=${this.detailInfo.bid}`,
          webview: 'zWebViewShop'
        })
      } else {
        uni.navigateTo({
          url: `/pages/myPersonPage/index?targetUserId=${	this.detailInfo.user_id}`,
          webview: 'zWebView'
        })
      }
    },
			// 倒计时
		onTimeup() {
			if(this.detailInfo.order_id) {
				this.purchaseDetaile(this.detailInfo.order_id);
			}
		},
		onPreview(urlImg){
			uni.previewImage({
				urls: [urlImg],
				current: urlImg,
			})
		},
		getImg() {
      scorePayment({}).then((res) => {
        this.urlImg = res.data.data.img;
      });
    },
	  inlineCall(info) {
			if(uni.getStorageSync("user_id") == info.user_id) {
				uni.showToast({
					title: this.$t('不能和自己聊天'),
					icon: "none",
				});
			} else {
				this.isMessageGo({
					action: 'initiateChat',
					data: info.user_id
				})
				return;
				chechkIm({
					send_uid: uni.getStorageSync("user_id"),
					receive_uid: info.user_id,
				}).then(res => {
					if (res.data.code == 1) {
						this.isMessageGo({
							action: 'initiateChat',
							data: info.user_id
						})
					} else {
						if (res.data.data.send_user == false) {
							uni.$u.toast(this.$t('积分不足，请充值积分'))
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/vip/scorePoint',
								})
							}, 500)
						} else {
							uni.$u.toast(this.$t('对方积分不足'))
						}
					}
				})
			}



	  	// this.isMessageGo({
	  	// 	action: 'initiateChat',
	  	// 	data: info.user_id
	  	// })
	  },
	  callPhone(item) {
	  	if(uni.getStorageSync("user_id") == item.user_id) {
	  		uni.showToast({
	  			title: '不能给自己打电话',
	  			icon: "none",
	  		});
	  	} else {
	  		request_minute({
	  			user_id: uni.getStorageSync("user_id"),
	  			target_id: item.user_id,
	  		}).then(res => {
	  			if (res.data.data.flag == 1) {
	  				this.isMessageGo({
	  					action: 'call',
	  					data: {
	  						userId: item.user_id,
	  						type: res.data.data.type || 1,
	  					}
	  				})
	  			} else {
	  				uni.showToast({
	  					title: this.$t('积分不足，请充值积分'),
	  					icon: "none",
	  				});
	  				setTimeout(() => {
	  					uni.navigateTo({
	  						url: '/pages/vip/scorePoint',
	  						webview: 'zWebView'
	  					})
	  				}, 500)
	  			}
	  		})
	  	}
	  },
	  // 上传视频和图片
	  async onUpload({
	  	type,
	  	size,
	  	count
	  }, keyx) {
	  	let res = await uploadFile(await chooseFile({
	  		type,
	  		size,
	  		count,
	  	}))
	  	if (type == 'image') {
	  		this.productImgUrls.push(res);
	  	}
	  	// if (type == 'video') {
	  	// 		console.log('res--', res)
	  	// 	this.options.productVideoUrls = [res];
	  	// }
	  },
	  confirmId() {
	  	// return
	  	uni.showLoading({
	  		title: this.$t('加载中')
	  	});
	  	yuntraceUpdate({
	  		user_id: uni.getStorageSync('user_id'),
	  		order_id: this.detailInfo.order_id,
	  		yuntrace_id: this.yuntrace_id
	  	}).then(res => {
	  		this.confirmModal = false
	  		uni.hideLoading()
	  		uni.redirectTo({
	  			url: '/pages/caigou/order/index?type=1&status=3'
	  		})
	  	})
	  },
	  confirmPay() {
		  this.btnDis = true
		  confirmPay({
			  user_id: uni.getStorageSync('user_id'),
			  order_id: this.detailInfo.order_id,
		  }).then(res => {
			  if (res.data.code == 200) {
				  uni.$u.toast(res.data[this.plang('message')])
				  uni.redirectTo({
						url: '/pages/caigou/order/index?type=1&status=4'
				  })
			  } else {
				// uni.$u.toast(res.data.message)
				uni.$u.toast(res.data[this.plang('message')])
				this.btnDis = false
			}
		  })
	  },
	  // 复制文本到剪切板
	  copyToClipboard(text) {
	      uni.setClipboardData({
	          data: text,
	          success:  ()=> {
	              uni.showToast({
	                  title: this.$t('复制成功'),
	                  icon: 'success',
	                  duration: 2000
	              });
	          },
	          fail:  ()=> {
	              uni.showToast({
	                  title: this.$t('复制失败'),
	                  icon: 'none',
	                  duration: 2000
	              });
	          }
	      });
	  },
	  uploadPay() {
		this.submitBtn = true  
		if(this.productImgUrls.length == 0) return
		if (this.detailInfo.payment_voucher) {
        if (this.productImgUrls.length == this.detailInfo.payment_voucher.split(',').length) {
          uni.showToast({
            title: this.$t("请选择付款凭证"),
            icon: "none",
            duration: 2000,
          });
          return;
        }
      }
		// const imgStr = 
		for(let i=0;i<this.productImgUrls.length;i++){
			if(i>0){
				this.imgUrls+=(","+this.productImgUrls[i].fullurl)
			}else{
				this.imgUrls=""+this.productImgUrls[i].fullurl
			}
		}
		// return
		upPaymentVoucher({
			user_id: uni.getStorageSync('user_id'),
			order_id: this.detailInfo.order_id,
			payment_voucher: this.imgUrls
		}).then(res => {
			if(res.data.code == 200) {
				uni.showToast({
					title: this.$t("上传成功"),
					icon: "success",
					duration: 2000,
				});
				setTimeout(() => {
					uni.navigateBack()
				}, 300)
			} else {
				// uni.$u.toast(res.data.message)
				uni.$u.toast(res.data[this.plang('message')])
			}
		})
	  },
	
	  // 删除图片
	  onDelete(index, arr) {
	    this[arr].splice(index, 1)
	    this.$forceUpdate();
	  },
	  onPreview(current) {
	  	uni.previewImage({
	  		current,
	  		urls: [current],
	  		
	  	})
	  },
    // 发货
    onSendShiping() {
      uni.navigateTo({
        url: `/pages/publish/start?buyFlag=1&orderId=${this.detailInfo.order_id}`,
        webview: 'zWebView',
      })
    },
	afterSale() {
		uni.redirectTo({
		  url:`/pages/caigou/reasonAfterSale?order_id=${this.detailInfo.order_id}`
		})
	},
    // 查看物流
    onSeeWuliu() {
      uni.navigateTo({
        url:'/pages/shipmentRecord/index?status=3',
        webview: 'zWebView',
      })
    },
    getTopR() {
      return `calc(${+this.statusBarHeight}px + 44px + 400rpx)`
    },
    // 播放头部视频
    playsHeader(video) {
      // 判断安卓
      const systemInfo = uni.getSystemInfoSync();
      // 判断是否为 Android 系统
      if (systemInfo.platform === 'android') {
        this.playVideo = video;
        this.$refs.popupVideo.open()
        return;
      }
      this.videos.requestFullScreen();
      this.$nextTick(() => {
        this.videos.play();
      })
    },
    // 关闭图片弹窗
    closePop() {
      this.$refs.popup.close();
    },
    // 图片放大
    amplifyImg(imgUrl) {
      if (!imgUrl) return;
      this.commonImg = imgUrl;
      this.$refs.popup.open();
    },
	// 获取详情
	purchaseDetaile(order_id) {
		purchaseDetaile({
			order_id: order_id,
			user_id: uni.getStorageSync('user_id')
		}).then(res => {
			if (res.data.code == 200) {
				this.detailInfo = res.data.data
				
				if(this.detailInfo.payment_voucher) {
					let arr = this.detailInfo.payment_voucher.split(',')
					arr.forEach(item => {
						this.productImgUrls.push({
							fullurl: this.getImageUrl(item),
							url:  this.getImageUrl(item)
						})
					})
				}
				let time = this.detailInfo.day;
				this.miniteObj.hour = Math.floor(time / 3600)
				this.miniteObj.minute = Math.floor((time % 3600) / 60)
				this.miniteObj.second = time % 60
				if (this.confirmSocure) {
					this.confirmId();
				}
			} else {
				// uni.$u.toast(res.data.message)
				uni.$u.toast(res.data[this.plang('message')])
			}
		})
	},
    // 获取数据
    async getData() {
      const { data } = await this.$u.api.shopping.getProduct({
        id: 338,
      });
      this.currntMainPic = data.product.pic;
      this.list = [data.product.pic, data.product.pic, data.product.pic];
      this.currentVideo = data.product.video;
      this.product = data.product;
    },
    // 浏览记录列表
    async getHistoryData() {
      try {
        const {
          data
        } = await this.$u.api.shopping.getMemberHistory({
          id: 338,
          type: "shop",
        });
        this.historyNum = data.member_history_count || 0;
        if (!!data.member_history?.length) {
          let arr = [];
          data.member_history.map((item, index) => {
            let str = item[this.plang('username')] + this.$t("正在查看");
            arr.push(str)
          })
          this.historyList = [...arr];
        }
      } catch (e) {

      }
    },
  },

  onLoad(options) {
	this.getImg()
	if(options.status) {
		this.statusFlag = options.status
	}
	if(options.order_id) {
		this.purchaseDetaile(options.order_id)
	}
	if (options.confirmModal) {
		this.purchaseDetaile(options.orderId)
		this.confirmSocure = options.confirmModal
		this.yuntrace_id = options.yunzongId
	}
    this.videos = uni.createVideoContext('myVideo');
    // this.getData();
    // this.getHistoryData();
  },
}
</script>

<style scoped lang="scss">
	@import '@/assets/appScss.scss';
	@import './index.scss';
.user-sty {
		background-image: url('../../../static/userLogoBg.png');
		background-size: 100% 100%;
		margin-left: 12rpx;
		min-width: 120rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 400;
		font-size: 20rpx;
		line-height: 30rpx;
		box-shadow: 0rpx 1.25rpx 0.75rpx 0rpx #D061024D;
		color: #FFFFFF;
		text-align: center;
		padding-left: 26rpx;
		
	}
	.uploadBtn {
		height: 80rpx;
		width: 100%;
		background-color: #007AFF;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 30rpx;
		border-radius: 16rpx;
	}
	.modalSty {
		text-align: center;
	}
	.r_between{
		.user-sty{
			padding:0 10rpx;
			background-image:none;
			border-radius: 500px;
			background: linear-gradient(90deg, #FF7000 0%, #FFA245 100%);
			box-shadow: -4px 4px 6px 0px rgba(255, 203, 151, 0.46) inset, -2px -3px 9.9px 0px #FFBE7C inset, 0px 4px 13.8px 0px #DEE1EF;


		}
	}

	.img-overx {
		overflow-x: auto;
		flex: 1;
		image {
			flex-shrink: 0;
		}
	}
</style>